<template>
  <div class="trouble-shooting-container">
    <div class="main-layout">
      <!-- 侧边栏组件 -->
      <TroubleSidebar
        @trouble-selected="handleTroubleSelected"
        @open-panel="handleOpenPanel"
      />

      <!-- 主内容区 -->
      <div class="main-content">
        <div class="header">
          <h1 class="title">
            故障模拟系统
            {{ selectedTroubleTitle === "" ? "" : "- " + selectedTroubleTitle }}
          </h1>
          <div class="header-controls">
            <button class="control-panel-button" @click="toggleRightSidebar">
              {{ isRightSidebarVisible ? "关闭机组控制屏" : "打开机组控制屏" }}
            </button>
            <button class="back-button" @click="goBack">返回首页</button>
          </div>
        </div>

        <!-- Godot框架组件 -->
        <GodotFrame
          style="width: 100%; height: 100%"
          :html-path="godotHtmlPath"
          @iframe-loaded="onIframeLoaded"
          @iframe-error="onIframeError"
          @trouble-selected="onTroubleSelected"
          @control-panel-opened="onControlPanelOpened"
          @status-update="onStatusUpdate"
          @scene-loaded="onSceneLoaded"
          ref="godotFrameComponent"
        />
      </div>

      <!-- 右侧侧边栏 -->
      <RightControlSidebar
        :is-visible="isRightSidebarVisible"
        :menu-items="rightMenuItems"
        @menu-item-click="handleRightMenuItemClick"
      />
    </div>

    <!-- 浮动面板组件 -->
    <FloatingPanel
      :is-visible="showFloatingPanel"
      :current-item="currentSelectedItem"
      :current-water-flow="currentWaterFlow"
      :initial-airflows="currentAirflows"
      :ptc-current-status="ptcCurrentStatus"
      :ptc-damage-status="ptcDamageStatus"
      @close="handleCloseFloatingPanel"
      @flow-updated="updateWaterFlowStatus"
      @airway-cleaned="updateAirwayStatus"
      @ptc-rewired="updatePTCStatus"
      @ptc-recovered="updatePTCDamageStatus"
      @open-generator-panel="handleOpenGeneratorPanel"
      @open-trend-chart="handleOpenTrendChart"
      :is-overload-active="isOverloadActive"
      @load-adjusted="handleLoadAdjusted"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { useWsStore } from "@/store/ws";
import { useUserStore } from "@/store/user";
import { useTroubleStore } from "@/store/trouble";
import { useAlarmStore } from "@/store/alarm";
import { getFullControlStatus, setAlgorithmParam } from "@/api/util.js";
import DownloadWsService from "@/ws_service/downloadWsService";
//导入启动算法ws服务
import StartWsService from "@/ws_service/startModelWsService";
import TroubleSidebar from "@/components/TroubleSidebar.vue";
import RightControlSidebar from "@/components/pop_up/RightControlSidebar.vue";
import FloatingPanel from "@/components/pop_up/FloatingPanel.vue";
import GodotFrame from "./GodotFrame.vue";
import { ElMessage } from "element-plus";

let startModelWsService;
let downloadWsService = null;
let statusTimer = null;
let firstApiCallSuccess = false;
const router = useRouter();
const wsStore = useWsStore();
const userStore = useUserStore();
const troubleStore = useTroubleStore();

// 水流量相关状态
const currentWaterFlow = ref(50); // 默认水流量
const hasLowWaterFlowAlarm = ref(false); // 标记是否已经报警过

// 风路堵塞相关状态
const currentAirflows = reactive({
  "2_38_0_0": 2.5, // 第一路的给定风冷流量(Dode_Vol5)
  "2_39_0_0": 2.5, // 第二路的给定风冷流量(Dode_Vol6)
  "2_40_0_0": 2.5, // 第三路的给定风冷流量(Dode_Vol8)
  "2_36_0_0": 2.5, // 第四路的给定风冷流量(Dode_Vol10)
});
const hasAirwayBlockedAlarm = ref(false); // 标记风路堵塞是否已经报警过
// PTC系统当前状态
const ptcCurrentStatus = ref(1); // 1表示正常状态，0表示故障状态
// PTC接触不良是否已经报警过
const hasPTCPoorContactAlarm = ref(false);
// PTC损坏当前状态
const ptcDamageStatus = ref(1); // 1表示正常状态，0表示损坏状态
// PTC损坏是否已经报警过
const hasPTCDamageAlarm = ref(false);
const alarmStore = useAlarmStore();
const downloadWsUrl = wsStore.downloadWsUrl;
const startModelWsUrl = wsStore.startModelWsUrl;

// 用于存储报警状态的响应式对象
const alarmStatus = reactive({
  // 发电机定子绕组温度高报警状态
  statorTempAlarm: 1,
  // 其他可能的报警状态可以在这里添加
});

// 数据key到参数索引的映射（从GeneratorParameter组件迁移）
const keyToIndexMap = {
  // 发电机定子绕组温度映射
  "1_17_0_0": "temp1", // 发电机定子绕组温度1
  "1_18_0_0": "temp2", // 发电机定子绕组温度2
  "1_19_0_0": "temp3", // 发电机定子绕组温度3
  "1_20_0_0": "temp4", // 发电机定子绕组温度4
  // 负载参数
  "2_18_0_0": "load", // 负载接入状态
  // 其他映射可以根据需要添加
};

// 用于存储从WebSocket接收到的关键参数值
const wsParameterValues = reactive({
  temp1: 0,
  temp2: 0,
  temp3: 0,
  temp4: 0,
  load: 0,
});

// 响应式数据用于标题联动
const selectedTroubleTitle = ref("");

// 移除了Godot WebGL通信相关状态变量

// 定时器回调函数，调用getFullControlStatus接口
const fetchControlStatus = async () => {
  try {
    const userId = userStore.userInfo?.id;
    if (!userId) {
      console.error("用户ID无效，无法获取控制状态");
      return;
    }

    const response = await getFullControlStatus(userId);
    // console.log("获取控制状态成功:", response);

    // 更新用户数据
    if (response.copyNum !== undefined) {
      userStore.setCopyNum(response.copyNum);
    }

    if (
      response.firstUserInfo &&
      response.firstUserInfo.timeLeft !== undefined
    ) {
      userStore.setTimeLeft(response.firstUserInfo.timeLeft);
    }

    // 如果是第一次接口调用成功，初始化wsService
    if (!firstApiCallSuccess) {
      initializeWsService();
      firstApiCallSuccess = true;
    }
  } catch (error) {
    console.error("获取控制状态失败:", error);
  }
};

// 初始化wsService
const initializeWsService = () => {
  try {
    if (!downloadWsService) {
      downloadWsService = new DownloadWsService(downloadWsUrl, {
        copyNum: userStore.copyNum,
      });

      // 设置wsService事件处理
      downloadWsService.on("onOpen", (event) => {
        console.log("WsService连接已建立");
      });

      downloadWsService.on("onError", (error) => {
        console.error("WsService连接错误:", error);
      });

      const startModelEvent = (event) => {
        try {
          startModelWsService = new StartWsService(startModelWsUrl, {
            copyNum: userStore.copyNum,
            paramList: [
              "2_6_0_0", // "Speed_Ref"    （设定速度）
              "2_18_0_0", // 负载接入开关(Load_Break)：0表示断开负载，1表示接入负载，负载过高时则四路风冷温度都会过高
              "2_38_0_0", // 第一路的给定风冷流量(Dode_Vol5)
              "2_39_0_0", // 第二路的给定风冷流量(Dode_Vol6)
              "2_40_0_0", // 第三路的给定风冷流量(Dode_Vol8)
              "2_36_0_0", // 第四路的给定风冷流量(Dode_Vol10)
              "2_43_0_0", // PTC系统故障(WindingPTC1_S)：0表示故障，1表示正常,为0时表示PTC损坏
              "1_17_0_0", // PTC定子绕组温度1(Winding_PTC1)
              "1_18_0_0", // PTC定子绕组温度2(Winding_PTC2)
              "1_19_0_0", // PTC定子绕组温度3(Winding_PTC3)
              "1_20_0_0", // PTC定子绕组温度4(Winding_PTC4)
              "1_4_0_0", // 积分器参数(Integrator)
              "1_3_0_0", // 电压参数(Ud)
              "1_2_0_0", // 电流参数(Current)
              "2_41_0_0", // 水流量参数(Temp_In4)
            ],
          });
          // 初始化时设置负载接入开关为0
          setAlgorithmParam("2_18_0_0", 0, userStore.copyNum);
          // 初始化时设置四路风冷流量为0.5
          setAlgorithmParam("2_38_0_0", 0.5, userStore.copyNum);
          setAlgorithmParam("2_39_0_0", 0.5, userStore.copyNum);
          setAlgorithmParam("2_40_0_0", 0.5, userStore.copyNum);
          setAlgorithmParam("2_36_0_0", 0.5, userStore.copyNum);

          // WebSocket数据处理现在由GeneratorParameter组件内部处理
          // 不需要在这里设置额外的回调
        } catch (error) {
          console.error("初始化StartWsService失败:", error);
        }
      };

      downloadWsService.onclose(startModelEvent);
    }
  } catch (error) {
    console.error("初始化WsService失败:", error);
  }
};

// 清除定时器和wsService连接
const cleanup = () => {
  if (statusTimer) {
    clearInterval(statusTimer);
    statusTimer = null;
  }

  if (downloadWsService) {
    try {
      downloadWsService.close();
    } catch (error) {
      console.error("关闭wsService连接失败:", error);
    }
    downloadWsService = null;
  }

  if (startModelWsService) {
    try {
      startModelWsService.close();
    } catch (error) {
      console.error("关闭startModelWsService连接失败:", error);
      R;
    }
    startModelWsService = null;
  }
};

const godotHtmlPath = ref("/HTMLTemplate/index.html");
const godotFrameComponent = ref(null);
const generatorMonitoring = ref(null);

// 返回首页
const goBack = () => {
  router.push("/home");
};

// GodotFrame组件事件处理函数

// iframe加载完成事件
const onIframeLoaded = () => {
  console.log("Godot WebGL应用加载成功");
};

// iframe加载错误事件
const onIframeError = (errorMsg) => {
  console.error("Godot WebGL应用加载失败:", errorMsg);
};

// 故障选择事件
const onTroubleSelected = (message) => {
  selectedTroubleTitle.value = message.troubleTitle || "";
  ElMessage.info(`选择故障: ${message.troubleTitle}`);
};

// 控制面板打开事件
const onControlPanelOpened = () => {
  isRightSidebarVisible.value = true;
};

// 状态更新事件
const onStatusUpdate = (message) => {
  if (message.parameters) {
    Object.assign(wsParameterValues, message.parameters);
  }
};

// 场景加载完成事件
const onSceneLoaded = (message) => {
  console.log("场景加载完成:", message.data.scene);
};

// 便捷函数，使用GodotFrame组件与Godot通信

// 发送故障选择指令到Godot
const sendTroubleSelection = (troubleId) => {
  if (godotFrameComponent.value) {
    return godotFrameComponent.value.sendTroubleSelection(troubleId);
  }
};

// 发送参数更新到Godot
const updateParametersInGodot = (parameters) => {
  if (godotFrameComponent.value) {
    return godotFrameComponent.value.updateParametersInGodot(parameters);
  }
};

// 发送控制指令到Godot
const sendControlCommand = (command, value) => {
  if (godotFrameComponent.value) {
    return godotFrameComponent.value.sendControlCommand(command, value);
  }
};

// 切换场景
const switchScene = (sceneName) => {
  if (godotFrameComponent.value) {
    return godotFrameComponent.value.switchScene(sceneName);
  }
};

// 重置模拟状态
const resetSimulation = () => {
  if (godotFrameComponent.value) {
    return godotFrameComponent.value.resetSimulation();
  }
};

// 直接发送自定义消息
const sendMessageToGodot = (messageType, data) => {
  if (godotFrameComponent.value) {
    return godotFrameComponent.value.sendMessageToGodot(messageType, data);
  }
};

// 右侧菜单数据
const rightMenuItems = ["发电机", "趋势曲线", "参数设定", "报警事件"];

// 右侧侧边栏显示状态
const isRightSidebarVisible = ref(false);
// 负载过载状态
const isOverloadActive = ref(false);
// 是否显示浮动面板
const showFloatingPanel = ref(false);
// 当前选中的项目
const currentSelectedItem = ref("");

// 切换右侧侧边栏显示状态
const toggleRightSidebar = () => {
  isRightSidebarVisible.value = !isRightSidebarVisible.value;
};

// 处理故障选择事件
const handleTroubleSelected = (trouble) => {
  console.log("Selected trouble:", trouble);
  // 更新标题中的故障名称
  selectedTroubleTitle.value = trouble.title || "";
  // 单选模式下，直接使用选中的故障项
  const selectedTrouble = troubleStore.getSelectedTrouble;
  console.log("Current selected trouble:", selectedTrouble);

  // 向Godot发送故障选择消息
  sendMessageToGodot("TROUBLE_SELECTION", {
    troubleId: trouble.id,
    troubleTitle: trouble.title,
    troubleData: trouble,
    timestamp: Date.now(),
  });
  console.log("已向Godot发送故障选择消息");
};

// 处理右侧菜单项点击
const handleRightMenuItemClick = (menuData) => {
  console.log("Right menu item clicked:", menuData);
  // 设置当前选中的项目并显示浮动面板
  currentSelectedItem.value = menuData.item;
  showFloatingPanel.value = true;
};

// 处理打开面板事件（从TroubleSidebar触发）
const handleOpenPanel = (panelType) => {
  console.log("打开面板:", panelType);
  // 打开浮动面板并显示对应的内容
  showFloatingPanel.value = true;
  currentSelectedItem.value = panelType;
};

// 处理关闭浮动面板
const handleCloseFloatingPanel = () => {
  showFloatingPanel.value = false;
  currentSelectedItem.value = "";
};

// 监听水流量变化的函数
const monitorWaterFlow = (flowValue) => {
  currentWaterFlow.value = flowValue;

  // 检查是否需要报警
  if (flowValue < 50 && !hasLowWaterFlowAlarm.value) {
    // 触发报警
    hasLowWaterFlowAlarm.value = true;
    ElMessage.warning(
      `水流量报警：当前水流量${flowValue} L/min，低于安全阈值50 L/min`
    );
    // 可以将报警信息添加到报警store中
    if (alarmStore) {
      alarmStore.addAlarm({
        type: "water_flow",
        level: "warning",
        message: `水流量偏低：${flowValue} L/min`,
        timestamp: new Date(),
      });
    }
  }
  // 当水流量恢复正常时，重置报警状态
  else if (flowValue >= 50 && hasLowWaterFlowAlarm.value) {
    hasLowWaterFlowAlarm.value = false;
    ElMessage.success("水流量已恢复正常水平");
  }
};

// 模拟水流量变化的函数（实际项目中应从WebSocket或API获取）
const simulateWaterFlowChange = () => {
  // 这里仅作为示例，实际应从系统中获取真实数据
  // 可以在WebSocket消息处理中调用monitorWaterFlow函数
};

// 暴露给子组件的方法，用于更新水流量状态
const updateWaterFlowStatus = (newFlow) => {
  monitorWaterFlow(newFlow);
};

// 监听风路流量变化的函数
const monitorAirflows = (airflowData) => {
  console.log("airflowData:", airflowData);
  // 更新当前风量状态
  Object.assign(currentAirflows, airflowData);

  // 获取所有四路风量值
  const airflowValues = Object.values(currentAirflows);

  // 检查是否所有四路风量均小于2
  const isAllBelowThreshold = airflowValues.every((value) => value < 2);

  // 检查是否需要报警
  if (isAllBelowThreshold && !hasAirwayBlockedAlarm.value) {
    // 触发报警
    hasAirwayBlockedAlarm.value = true;
    ElMessage.warning(`风路堵塞报警：所有四路风量均低于安全阈值2`);
    // 可以将报警信息添加到报警store中
    if (alarmStore) {
      alarmStore.addAlarm({
        type: "airway_blocked",
        level: "warning",
        message: `风路堵塞：所有四路风量均低于阈值`,
        timestamp: new Date(),
      });
    }
  }
  // 当风路恢复正常时，重置报警状态
  else if (!isAllBelowThreshold && hasAirwayBlockedAlarm.value) {
    hasAirwayBlockedAlarm.value = false;
    ElMessage.success("风路已恢复正常，所有风量参数正常");
  }
};

// 暴露给子组件的方法，用于更新风路状态
const updateAirwayStatus = (newAirflows) => {
  monitorAirflows(newAirflows);
};

// 处理PTC重新接线完成事件
const updatePTCStatus = (newStatus) => {
  // 更新PTC状态
  ptcCurrentStatus.value = newStatus;
  // 重置报警状态
  hasPTCPoorContactAlarm.value = false;
  ElMessage.success("PTC线路已重新连接，系统恢复正常");
};

// 处理PTC修复完成事件
const updatePTCDamageStatus = (newStatus) => {
  // 更新PTC损坏状态
  ptcDamageStatus.value = newStatus;
  // 重置报警状态
  hasPTCDamageAlarm.value = false;
  ElMessage.success("PTC系统已修复，恢复正常状态");
};

// 处理打开发电机面板事件
const handleOpenGeneratorPanel = (panelType) => {
  // 更新当前选中项为发电机面板
  currentSelectedItem.value = panelType;
};

// 处理负载调节完成事件
const handleLoadAdjusted = () => {
  console.log("负载已调节完成");
  // 可以在这里添加负载调节后的逻辑，比如更新状态等
};

// 处理打开趋势曲线事件
const handleOpenTrendChart = (panelType) => {
  console.log("打开趋势曲线面板");
  // 更新当前选中项为趋势曲线面板
  currentSelectedItem.value = panelType;
};

// 处理WebSocket接收到的报警相关数据
const troubleProcessData = (data) => {
  if (!data || typeof data !== "object") return;

  // 更新参数值
  Object.entries(data).forEach(([key, value]) => {
    if (key in keyToIndexMap && Array.isArray(value) && value.length > 0) {
      const paramName = keyToIndexMap[key];
      // 值应该只保留最多两位小数
      wsParameterValues[paramName] = parseFloat(
        value[value.length - 1].toFixed(2)
      );
    }
    if (currentAirflows[key])
      currentAirflows[key] = parseFloat(value[value.length - 1].toFixed(2));

    // 监听负载状态参数变化
    if (key === "2_18_0_0") {
      const loadStatusValue = parseInt(value[0]);
      // 更新负载过载状态
      isOverloadActive.value = loadStatusValue === 0;
    }
    // 监听PTC系统状态参数变化
    else if (key === "2_43_0_0") {
      const ptcStatusValue = parseInt(value[0]);

      // 更新PTC接触不良状态
      if (ptcStatusValue !== ptcCurrentStatus.value) {
        ptcCurrentStatus.value = ptcStatusValue;
        // 检查PTC是否接触不良，触发报警
        if (ptcStatusValue === 0 && !hasPTCPoorContactAlarm.value) {
          hasPTCPoorContactAlarm.value = true;
          ElMessage.warning(`PTC线路接触不良报警：PTC系统故障`);
          // 将报警信息添加到报警store中
          if (alarmStore) {
            alarmStore.addAlarm({
              type: "ptc_contact",
              level: "warning",
              message: `PTC线路接触不良：PTC系统故障`,
              timestamp: new Date(),
            });
          }
        }
        // 当PTC恢复正常时，重置报警状态
        else if (ptcStatusValue === 1 && hasPTCPoorContactAlarm.value) {
          hasPTCPoorContactAlarm.value = false;
          ElMessage.success("PTC已恢复正常");
        }
      }

      // 更新PTC损坏状态
      if (ptcStatusValue !== ptcDamageStatus.value) {
        ptcDamageStatus.value = ptcStatusValue;
        // 检查PTC是否损坏，触发报警
        if (ptcStatusValue === 0 && !hasPTCDamageAlarm.value) {
          hasPTCDamageAlarm.value = true;
          ElMessage.warning(`PTC损坏报警：PTC系统故障`);
          // 将报警信息添加到报警store中
          if (alarmStore) {
            alarmStore.addAlarm({
              type: "ptc_damage",
              level: "warning",
              message: `PTC损坏：PTC系统故障`,
              timestamp: new Date(),
            });
          }
        }
        // 当PTC损坏状态恢复正常时，重置报警状态
        else if (ptcStatusValue === 1 && hasPTCDamageAlarm.value) {
          hasPTCDamageAlarm.value = false;
          ElMessage.success("PTC已恢复正常");
        }
      }
    }
  });

  // 计算温度高报警状态（检查定子绕组温度）
  const hasHighTemperature =
    wsParameterValues.temp1 > 165 ||
    wsParameterValues.temp2 > 165 ||
    wsParameterValues.temp3 > 165 ||
    wsParameterValues.temp4 > 165;
  // wsParameterValues.load === 1;

  // 获取当前报警状态
  const currentAlarmState = hasHighTemperature ? 0 : 1;
  // 检查是否有状态变化
  const previousAlarmState = alarmStatus.statorTempAlarm;

  // 更新温度高报警状态
  alarmStatus.statorTempAlarm = currentAlarmState;

  // 当从正常状态变为报警状态时，添加报警事件并弹出消息
  if (previousAlarmState === 1 && currentAlarmState === 0) {
    // 使用固定的报警类型ID来标识同一类型的报警
    const alarmTypeId = "generator-stator-temp-alarm";

    // 检查是否已经有相同类型的活动报警
    if (!alarmStore.isAlarmActive(alarmTypeId)) {
      // 找出温度超过阈值的绕组
      const highTempWindings = [];
      if (wsParameterValues.temp1 > 165)
        highTempWindings.push({ index: 1, temp: wsParameterValues.temp1 });
      if (wsParameterValues.temp2 > 165)
        highTempWindings.push({ index: 2, temp: wsParameterValues.temp2 });
      if (wsParameterValues.temp3 > 165)
        highTempWindings.push({ index: 3, temp: wsParameterValues.temp3 });
      if (wsParameterValues.temp4 > 165)
        highTempWindings.push({ index: 4, temp: wsParameterValues.temp4 });

      // 准备报警描述
      let description = "发电机定子绕组温度异常";
      if (highTempWindings.length > 0) {
        description = `发电机定子绕组温度异常：${highTempWindings
          .map((item) => `绕组${item.index}温度${item.temp}°C`)
          .join("，")}`;
      } else if (wsParameterValues.load === 1) {
        description = "运行过载导致温度报警";
      }

      // 添加到store
      const newAlarm = alarmStore.addAlarmEvent({
        id: alarmTypeId, // 使用固定ID
        timestamp: new Date().toLocaleString(),
        variableName: "发电机定子绕组温度",
        eventType: "温度高报警",
        description: description,
        level: "error",
      });

      // 记录为活动报警
      if (newAlarm) {
        alarmStore.addActiveAlarm(alarmTypeId);

        // 弹出报警消息
        ElMessage.warning({
          message: description,
          type: "warning",
          duration: 5000,
          showClose: true,
        });
      }
    }
  }

  // 当从报警状态变为正常状态时，移除活动报警记录
  if (previousAlarmState === 0 && currentAlarmState === 1) {
    // 使用固定的报警类型ID来移除活动报警
    const alarmTypeId = "generator-stator-temp-alarm";

    // 检查并移除该类型的活动报警
    if (alarmStore.isAlarmActive(alarmTypeId)) {
      alarmStore.removeActiveAlarm(alarmTypeId);
    }
  }
};

// 组件挂载时设置定时器和初始化
onMounted(() => {
  try {
    // 恢复用户数据
    userStore.restoreUserData();

    // 恢复选中的故障标题
    const savedTroubleTitle = localStorage.getItem("selectedTroubleTitle");
    if (savedTroubleTitle) {
      selectedTroubleTitle.value = savedTroubleTitle;
    }

    // 检查用户是否已登录，如果未登录则跳转到登录页
    // if (!userStore.isLogin) {
    //   router.push("/login");
    // }

    // 设置10秒间隔的定时器
    statusTimer = setInterval(fetchControlStatus, 10000);

    // 立即执行一次接口调用
    fetchControlStatus();

    StartWsService.onProcessedData(troubleProcessData);
  } catch (error) {
    console.error("组件挂载初始化失败:", error);
  }
});

// 组件卸载时清理资源
onUnmounted(() => {
  cleanup();
  // 移除WebSocket事件监听
  StartWsService.offProcessedData(troubleProcessData);
  // 无需清理iframe通信管理器，由GodotFrame组件内部处理
});
</script>

<style scoped>
.trouble-shooting-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
}

.main-layout {
  display: flex;
  height: 100%;
  width: 100%;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.monitoring-panel {
  padding: 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  min-height: 250px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #22474f;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
  gap: 20px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 移除了Godot连接状态指示器相关样式 */

.title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.back-button {
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.control-panel-button {
  padding: 8px 16px;
  background-color: #e1612e;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.control-panel-button:hover {
  background-color: #f1713e;
  transform: translateY(-2px);
}

/* iframe相关样式已移至GodotFrame组件中 */
</style>